import React, { useEffect, useRef } from "react";
import * as echarts from 'echarts';

const Echartsone: React.FC = () => {
    const chartRef = useRef<HTMLDivElement>(null);
  
    useEffect(() => {
      if (chartRef.current) {
        const chart = echarts.init(chartRef.current);
        const option = {
          title: {
            text: '123',
            subtext: '在线设备',
            left: 'center',
            top: '45%',
            textStyle: {
              color: '#fff',
              fontSize: 20,
              fontWeight: 'bold'
            },
            subtextStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          graphic: {
            type: 'text',
            right: 10,  // 与图例的右侧对齐
            top: '30%', // 调整这个值使文本位于图例上方
            style: {
              text: '总设备数: 165',
              textAlign: 'right',
              fill: '#fff',
              fontSize: 14, // 缩小字体大小
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: 30,    // 与graphic的right保持一致
            top: '35%',   // 在总设备数下方留出空间
            data: ['在线', '离线'],
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            formatter: (name: string) => name  // 移除总设备数显示
          },
          series: [
            {
              name: '设备状态',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false,
                length: 20, // 增加图表和颜色标识之间的距离
                length2: 20 // 增加图表和颜色标识之间的距离
              },
              data: [
                { value: 123, name: '在线', itemStyle: { color: '#5087ec' } },
                { value: 42, name: '离线', itemStyle: { color: '#ff5e59' } }
              ]
            }
          ],
          animation: true
        };
        chart.setOption(option);
  
        // 窗口调整大小处理
        const handleResize = () => {
          chart.resize();
        };
        window.addEventListener('resize', handleResize);
  
        return () => {
          window.removeEventListener('resize', handleResize);
          chart.dispose();
        };
      }
    }, []);
  
    return (
      <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
    );
  };
  
  export default Echartsone;